<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
	<!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/header.css">
	<link rel="stylesheet" type="text/css" href="css/bottom.css">
	<link rel="stylesheet" type="text/css" href="css/detail.css">
	<title>公司简介</title>
</head>
<body>
	<header class='header'>
		<div class="logo"><img src="img/logo.gif"></div>
		<div class="asideBox">
			<div class='searchBox'>
				<div class="language"><span>简体中文</span><span>English</span></div>
				<search ><input type="text" class="search"><i class="icon-search"></i></search>
			</div>
			<div class="title">
				<a href="index.html" class=" btn-hover">首页</a>
				<a href="Detail.html" class="on btn-hover">公司简介</a>
				<a href="Products.html" class="btn-hover">产品介绍</a>
				<a href="News.html" class="btn-hover">新闻动态</a>
				<a href="Recruit.html" class="btn-hover">人才招聘</a>
			</div>
		</div>
	</header>
	<section class="navBox"><img src="img/Q0001.png"></section>
	<section class="pageBox">
		<div class="tipBox">
			<div class='content'>
				<i ><img  src="img/cp_05.png"></i>
				<span>当前位置</span>:
				<span>首页</span>>
				<span id='tips'>公司简介</span>
			</div>
		</div>
		<div class='mainBox'>
			<div class="title" id='title'>
				<a class='on btn-hover' dataset='1'>公司简介</a>
				<a class='btn-hover' dataset='2'>企业文化</a>
				<a class='btn-hover' dataset='3'>动漫追番表</a>
				<a class='btn-hover' dataset='4'>声优风采</a>
			</div>
			<div class="contentBox" id="list">
				<div class="list1 list" dataPage='1'>
					<div class='imgBox'><img class='animate' src="img/2a.jpg"></div>
					<p>湖南蓝猫卡通传媒有限公司，是中国最早、规模最大的动漫企业之一，专业从事动画节目制作、动画软件开发、动画产业经营、动画人才培训。企业自1999年成立，历经10年的发展，
						成功缔造了中国第一个动漫品牌--蓝猫，生产的节目不仅刷新了世界吉尼斯最长动画片的记录，并带着中国动漫的骄傲，输出到了全球36个国家和地区，创造了中国动漫的诸多奇迹。
						公司先后被文化部授牌国家动漫游戏产业振兴基地、国家动画产业基地、国家文化产业示范基地。</p>
				</div>
				<div class="list2 list" dataPage='2'>
					<div class='imgBox'><img class='animate' src="img/5a.jpg"></div>
					<h3>蓝猫文化:</h3>
					<p>  蓝猫——是迄今为止，中国大陆动漫行业唯一的驰名商标。 蓝猫是国家动漫游戏产业振兴基地、国家动画产业基地和国家文化产业示范基地，是中国大陆最早最大的原创动画企业之一，
						 累计节目制作量达8万余分钟。 蓝猫荣获世界知识产权组织-创意金奖“企业奖”，被联合国世界知识产权组织(WIPO) 评定为“中国衍生版权和商标权战略最具核心竞争力”的文化企业。
						 蓝猫节目持续十余年在大陆1000多家电视台播出，并成功输出到香港、台湾、中东、新加坡、韩国、美国等全球36个地区和国家。 </p>
					<h3>企业优势:</h3>
					<p>湖南蓝猫动漫传媒有限公司集动画软件开发、动画节目制作、动画产业经营、动画人才培训为一体的全国重点动漫企业。
						 公司拥有各类专业技术、营销类人才500余人，年生产原创动画节目8000-10000分钟，被誉为中国原创动漫领域的“领头猫”。</p>
				</div>
				<div class="list3 list" dataPage='3'>
					<div class='imgBox'><img src="img/zhuifan.png"></div>
				</div>
				<div class="list4 list" dataPage='4'>
					<!-- Swiper -->
				    <div class="swiper-container carousel2">
				        <div class="swiper-wrapper">
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/zhunei.jpg">
						            <figcaption>
						                <h2>竹内顺子</h2>
						                <p>代表作：《火影忍者》、《浪客剑心》</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/zhoncun.jpg">
						            <figcaption>
						                <h2>中村千绘</h2>
						                <p>代表作：《火影忍者》、《多啦A梦》</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/bins.jpg">
						            <figcaption>
						                <h2>杉山纪彰</h2>
						                <p>代表作：《火影忍者》、《黑执事》</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				            <div class="swiper-slide">
					            <figure class="effect-sadie">
						            <img src="img/jinshang.jpg">
						            <figcaption>
						                <h2>井上和彦</h2>
						                <p>代表作：《火影忍者》（旗木卡卡西）</p>
						                <a href="#" target="_blank"></a>
						            </figcaption>			
						        </figure>
				            </div>
				        </div>
				        <!-- Add Pagination -->
				        <div class="swiper-pagination"></div>
				                <!-- Add Arrows -->
				        <div class="swiper-button-next"></div>
				        <div class="swiper-button-prev"></div>
				    </div>
				</div>
			</div>
		</div>
	</section>
	<footer class="footer-bg">
		<div class='footer'>
			<div class="asideBox-l asideBox">
				<p>友情链接:蓝猫卡通传媒</p>
				<p>服务热线:0731-8008208820(时间:10:00~17:00)</p>
				<p>公司地址：湖南省长沙市万达广场B栋</p>
			</div>
			<div class="asideBox-r asideBox">
				<div class="imgBox"><img class='animate' src="img/qrcode.jpg"></div>
				<div class="contentBox">
					<p>微信号</p>
					<p>扫描关注</p>
				</div>
			</div>
		</div>
	</footer>
	<div class="nav-bottom">
		Copyright 2003-2007, 版权所有 TAOBAO.COM
	</div>
	
</body>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>

<script src="/js/swiper.min.js"></script>
<script type="text/javascript">
		var swiper2 = new Swiper('.list4 .swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        paginationClickable: true,
	        spaceBetween: 30,
	        centeredSlides: true,
	        autoplay: 2500,
	        autoplayDisableOnInteraction: false,
	        slidesPerView: 4,
        	centeredSlides: true,
        	loop:true,
        	pagination : '.swiper-pagination',
		    paginationClickable: true,
		    longSwipesRatio: 0.3,
		    touchRatio:1,
		    observer:true,//修改swiper自己或子元素时，自动初始化swiper
		    observeParents:true,//修改swiper的父元素时，自动初始化swiper
	    });
		$(function(){
			$('#title a').on('click',function(){ 
				var that=this;
				$('#title a').each(function(){
					if($('#title a').hasClass('on')){
						$(this).removeClass('on');
					}
				})
				$('#list .list').each(function(){
					$(this).hide();
					if($(that).attr('dataset')==$(this).attr('dataPage')){
						$(this).show();
					}
				})
				$('#tips').html($(this).html());
				$(this).addClass('on');
			})
		})
</script>
</html>